
<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span style="font-size: 24px;">{{ $t('pageTitle.pseudonymConfigure') }}</span><!--支付渠道-->
            </h3>
        </div>
        <div class="module_content">
            <div class="header">
                <el-button type="primary" @click="addNewFromShow=true">{{$t('finance.addNewGroup') }}</el-button>
            </div>
            <div class="group-config">
                <p>{{$t('common.timestamp')}}<span>{{groupConfigData.intervalTime}}</span>{{$t('common.maxBorrow')}}<span>{{groupConfigData.productCount}}</span>{{$t('common.newProduct')}}</p>
                <el-button type="primary" @click="editQueryConfig">{{$t('common.edit')  }}</el-button>
            </div>
            <div class="group_list">
                <div class="group_list_item" v-for="item in groupList" :key="item.id">
                    <div class="name">
                        {{item.groupName}}
                    </div>
                    <div class="operate">
                        <el-button type="primary" @click="editGroup(item)">{{$t('common.edit')}}</el-button>
                        <el-button  @click="delate(item)">{{$t('system.delete')  }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <Addnewgroup v-if="addNewFromShow" @addGroupClose="addGroupClose" @addGroupSuc="addGroupSuc"></Addnewgroup>
        <editGroup :data="group" v-if="editGroupShow" @edirGroupClose="editGroupClose" @editGroupSuc="editGroupSuc"></editGroup>
        <!-- 借贷天数配置 -->
        <editConfig :data="groupConfigData" @handleCloseEditConfig="handleCloseEditConfig" @handleEditConfig="handleEditConfig" v-if="showEditConfig"/>
    </div>
</template>

<script>
import Addnewgroup from './componnets/add-new-group.vue'
import editGroup from './componnets/edit-group.vue'
import editConfig from './componnets/edit-config.vue'

export default {
    components:{
        Addnewgroup,
        editGroup,
        editConfig
    },
    data(){
        return {
            addNewFromShow:false,
            editGroupShow:false,
            groupList:[],
            group:null,
            showEditConfig: false,
            groupConfigData: {
                id: null,
                intervalTime: 0,
                productCount: 0
            }
        }
    },
    methods:{
        delate(item){
            this.$confirm(this.$tc('system.isConfirmDelete'), '', {
                    confirmButtonText: this.$t('common.confirm'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id:item.id
                    };
                  
                    this.$api.finance.kanaProductDivide.deleteGroup(params).then(res=>{
                        let { status, data, error ,msg} = res;
                        if ("1" === status && "00000000" === error ) {
                            this.$message.success('Delate Success');
                            this.queryGroup()
                        }else{
                            this.$message.error(msg);
                        }
                    })
                }).catch(() => {

                });
            
        },
        editGroup(data){
            this.group = data;
            this.editGroupShow = true
        },
        editGroupClose(){
            this.editGroupShow = false;
        },
        editGroupSuc(){
            this.editGroupShow = false;
            this.queryGroup()
        },
        addGroupClose(){
            this.addNewFromShow = false;
        },
        addGroupSuc(){
            this.addNewFromShow = false;
            this.queryGroup()
        },
        queryGroup(){
            this.$api.finance.kanaProductDivide.queryGroup().then((res) => {
                let { status, data, error } = res;
                if ("1" === status && "00000000" === error && data) {
                    // data = [
                    //     {
                    //         "id": 1,
                    //         "groupName": "catcash1",
                    //         "showDayCount": 1,
                    //         "deleteFlag": 0,
                    //         "company": "CatCash company",
                    //         "appName": "PeraMoo",
                    //         "appPackage": "com.peramoo",
                    //         "domain": "CatCash",
                    //         "createTime": 1671432980000,
                    //         "updateTime": 1671434096000
                    //     }
                    // ]
                    this.groupList = data
                }
            })

        },
        queryConfig(){
            this.$api.finance.kanaProductDivide.queryConfig().then((res) => {
                let { status, data, error } = res;
                if ("1" === status && "00000000" === error && data) {
                    const { productCount, intervalTime, id } = data
                    // this.groupList = data
                    this.groupConfigData = {
                        id,
                        productCount,
                        intervalTime
                    }
                }
            })
        },
        editQueryConfig () {
            this.showEditConfig = true
        },
        handleCloseEditConfig () {
            this.showEditConfig = false
        },
        handleEditConfig (data) {
            const { id, intervalTime, productCount } = data
            this.$api.finance.kanaProductDivide.updateConfig({
                id,
                intervalTime,
                productCount
            }).then((res) => {
                this.handleCloseEditConfig()
                let { status, data, error } = res;
                if ("1" === status && "00000000" === error && data) {
                    this.queryConfig()
                }
            })
        }
    },
    created(){
        this.queryGroup()
        this.queryConfig()
    }
}
</script>
<style lang="scss" scoped>
.content_panel_top{
    padding: 10px 0;
}
.module_content{
    .header{
        height: 90px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .group-config {
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ecae51;
        border-radius: 20px;
        padding: 40px 30px;
        font-size: 20px;
        span {
            margin: 0 10px;
            color: #ecae51;
        }
    }
    .group_list{
        .group_list_item{
            width: 80%;
            height: 150px;
            border: 1px solid #47c5b2;
            border-radius: 20px;
            padding: 20px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            .name{
                font-size: 20px;
                font-weight: bold;
            }
        }
    }
    
}
</style>